<template>
<div>
    <div>
        <van-nav-bar title="添加同行人" left-text="返回" left-arrow @click-left="onClickLeft()" />
    </div>
    <div class="heightF">
        <van-card>
            <template #tags>
                <!-- <van-cell-group>
                <van-field v-model="name" label="同行人亲属姓名" label-width="130px" input-align="right" placeholder="请输入同行人亲属姓名" />
                <van-field v-model="relation" label="同行亲属与本人关系" label-width="130px" input-align="right" placeholder="请输入同行亲属与本人关系" />
                <van-field v-model="workUnit" label="同行亲属工作单位" label-width="130px" input-align="right" placeholder="请输入同行亲属工作单位" />
                <van-field v-model="workJob" label="同行亲属职务" label-width="130px" input-align="right" placeholder="请输入同行亲属职务" />
                <van-button block=true type="info" @click="add()">添加</van-button>
            </van-cell-group> -->

                <van-form @submit="onSubmit">
                    <van-field v-model="name" name="name" label="同行人亲属姓名" label-width="130px" input-align="right" placeholder="同行人亲属姓名" :rules="[{ required: true, message: '请填写同行人亲属姓名' }]" />
                    <van-field v-model="relation" name="relation" label-width="130px" input-align="right" label="同行亲属与本人关系" placeholder="同行亲属与本人关系" :rules="[{ required: true, message: '请填写同行亲属与本人关系' }]" />
                    <van-field v-model="workUnit" name="workUnit" label-width="130px" input-align="right" label="同行亲属工作单位" placeholder="同行亲属工作单位" :rules="[{ required: true, message: '请填写同行亲属工作单位' }]" />
                    <van-field v-model="workJob" name="workJob" label-width="130px" input-align="right" label="同行亲属职务" placeholder="同行亲属职务" :rules="[{ required: true, message: '请填写同行亲属职务' }]" />
                    <div style="margin: 16px;">
                        <van-button block type="info" native-type="submit">
                            添加
                        </van-button>
                    </div>
                </van-form>
            </template>
        </van-card>

        <van-cell-group>
            <van-cell v-for="(item,index) in list" :key="index">
                <van-card>
                    <template #tags>
                        <van-cell title="同行人亲属姓名" :value=item.name style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="同行亲属与本人关系" :value=item.relation style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="同行亲属工作单位" :value=item.workUnit style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="同行亲属职务" :value=item.workJob style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-button block=true type="danger" @click="del(index)">删除</van-button>
                    </template>
                </van-card>
            </van-cell>
        </van-cell-group>
    </div>
    
    <div>
        <van-button block=true type="info" @click="add()">发送</van-button>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {

            list: [],
            name: '',
            //关系
            relation: '',
            //单位
            workUnit: "",
            //职务
            workJob: '',
            //I新增  U更新  D删除
            updateStatus: ''

        }
    },
    created() {

    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onSubmit(values) {
            console.log('submit', values);
            this.list.push(values)
            console.log(this.list)
            this.name=''
            this.relation=''
            this.workUnit=''
            this.workJob=''

        },
        del(index) {
            this.list.splice(index, 1)
        },
        add() {
            console.log(this.list, 66666666666666666666)
            this.$router.push({
                    name: 'cgjsq',
                    params: {
                        list: this.list
                    }
                })
        }
    }
};
</script>

<style scoped>
.heightF{
    height: calc(100vh - 90px);
    overflow-y: scroll;
}
</style >
